<template>
  <div class="com-header-address">
    <div class="address-view" v-if="addressType == 1" @click="openLusirDialog">
      <div class="address-info">
        <div class="userInfo">
          <img class="address-icon" src="../assets/images/address.png" alt="">
          <div class="username" v-if="Consignee.ConsigneeName == Consignee.CompanyName">{{Consignee.ConsigneeName}}</div>
          <div class="username" v-else>{{Consignee.ConsigneeName}}({{Consignee.CompanyName}})</div>
          <div class="mobile">{{Consignee.ConsigneeMobile}}</div>
        </div>
        <div class="address-text">
          {{Consignee.ConsigneeAddress}}
        </div>
      </div>
      <!-- command不为auto_launch 我会认为它不应该手动触发修改地址 -->
      <div class="arrow_right" v-if="command != 'auto_launch'">
        <img class="arrow_right_img" src="../assets/images/arrow_right1.png" alt="">
      </div>
    </div>
    <div class="address-select" v-else-if="addressType == 0" @click="openLusirDialog">
      <img class="address-icon" src="../assets/images/address.png" alt="">
      <div class="address-text">请输入您的收货地址</div>
      <img class="arrow_right_img" v-if="command != 'auto_launch'" src="../assets/images/arrow_right1.png" alt="">
    </div>
    <div class="address-select" v-else>
    </div>

    <lusirDialog style="cursor: text;" v-if="isShowLusirDialog" :showCloseIcon="command == 'auto_launch' ? false : true" :title="'确认您的收货地址'" :visible="isShowLusirDialog" @comfirm="handleConfirmDialog"
      @cancel="handleCloseDialog">
      <div class="edit-address-view">
        <div class="lusirFormItem">
          <div class="lusir-com_formLabel">公司名称</div>
          <div class="lusir-com_formContent">
            <input placeholder-class="lusir-com_placeholder" type="text" placeholder="请输入公司名称" v-model="Consignee_dialogObj.CompanyName" class="lusir-com_formInput">
          </div>
        </div>
        <div class="lusirFormItem">
          <div class="lusir-com_formLabel">收货人名称</div>
          <div class="lusir-com_formContent">
            <input placeholder-class="lusir-com_placeholder" type="text" placeholder="请输入收货人名称" v-model="Consignee_dialogObj.ConsigneeName" class="lusir-com_formInput">
          </div>
        </div>
        <div class="lusirFormItem">
          <div class="lusir-com_formLabel">手机号</div>
          <div class="lusir-com_formContent">
            <input placeholder-class="lusir-com_placeholder" type="text" placeholder="请输入手机号" v-model="Consignee_dialogObj.ConsigneeMobile" class="lusir-com_formInput">
          </div>
        </div>
        <div class="address-formItem-view">
          <div class="lusir-com_formLabel">详细地址</div>
          <textarea :auto-height="true" placeholder-class="lusir-com_placeholder" type="text" placeholder="请输入详细地址" v-model="Consignee_dialogObj.ConsigneeAddress" class="address-textarea"></textarea>
        </div>
      </div>
    </lusirDialog>
  </div>
</template>

<script>
// import comHeaderAddress from "@/components/com-header-address";
import lusirDialog from "./lusir-dialog";
export default {
  name: "comHeaderAddress",
  data() {
    return {
      addressType: -1, // 地址类型 1是有 0没有
      Consignee: {}, // 收货人信息
      isShowLusirDialog: false,
      Consignee_dialogObj: {}, // 弹框的对象集合
      session_key: "", //微信sessionKey
      command: '', // command  'auto_launch'校验信息自动打开弹层    'none' 不用校验
    };
  },
  methods: {
    // 打开弹框
    openLusirDialog() {
      // 如果command = 'auto_launch', 说明只能自动启动, 禁止手动启动
      if (this.command == 'auto_launch') {
        return;
      }
      this.isShowLusirDialog = true;
      this.Consignee_dialogObj = JSON.parse(JSON.stringify(this.Consignee));
    },
    async handleConfirmDialog() {
      if (!this.Consignee_dialogObj.ConsigneeMobile) {
        this.$wx.toast("请输入您的手机号");
        return;
      }
      const res = await this.$imServive({
        url: "/IMConsultant/ModifyDefaultConsignee",
        data: {
          ConsigneeName: this.Consignee_dialogObj.ConsigneeName,
          ConsigneeMobile: this.Consignee_dialogObj.ConsigneeMobile,
          ConsigneeAddress: this.Consignee_dialogObj.ConsigneeAddress,
          CompanyName: this.Consignee_dialogObj.CompanyName,
        }
      })
      this.isShowLusirDialog = false;
      this.$emit("callback", '');
    },
    handleCloseDialog() {
      this.isShowLusirDialog = false;
    },
    active(propsObj) {

      if (this.$options.data) {
        Object.assign(this.$data, this.$options.data());
      }

      this.Consignee = propsObj.params;

      this.command = propsObj.command;

      if (this.Consignee.ConsigneeMobile) {
        //收货人实体内有手机号, 则视为完整
        this.addressType = 1;
      } else {
        //收货人实体内有手机号, 则视为不完整
        //如请求模式是"需要自动启动", 则启动修改弹层
        this.addressType = 0;
        if (propsObj.command == 'auto_launch') {
          this.Consignee_dialogObj = propsObj.params;
          this.isShowLusirDialog = true;
        }
      }
    },
  },
  components: {
    lusirDialog,
  }
};
</script>



<style scpoed lang="stylus">
.com-header-address
  display flex
  align-items center
  height 1.44rem
  background #ffffff
  box-shadow 0 1px 0 0 #cbd4e1
  margin-bottom 0.32rem
  .address-view
    padding 0.16rem 0.4rem
    box-sizing border-box
    display flex
    align-items center
    width 100%
    height 100%
  .address-info
    flex 1
    max-width 8.76rem
    box-sizing border-box
    height 100%
    .userInfo
      height 0.56rem
      display flex
      align-items center
      .address-icon
        width 0.35rem
        height 0.4rem
      .username
        font-size 0.32rem
        color #282828
        margin-left 0.16rem
      .mobile
        font-size 0.32rem
        color #8e8e8e
        margin-left auto
    .address-text
      font-size 0.32rem
      color #8e8e8e
      width 100%
      text-overflow ellipsis
      white-space nowrap
      padding-left 0.5rem
      overflow hidden
      box-sizing border-box
  .arrow_right
    margin-left auto
    min-width 0.44rem
    max-width 0.44rem
    display flex
    justify-content flex-end
    align-items center
    .arrow_right_img
      width 0.2rem
      height 0.32rem
  .address-select
    padding 0.16rem 0.4rem
    box-sizing border-box
    display flex
    align-items center
    width 100%
    .address-icon
      width 0.35rem
      height 0.4rem
    .address-text
      font-size 0.4rem
      color #e74c3c
      margin-left 0.16rem
    .arrow_right_img
      margin-left auto
      width 0.2rem
      height 0.32rem
.lusirFormItem
  display flex
  justify-content space-between
  align-items center
  padding 0.28rem 0.4rem
  background #ffffff
  border-bottom 1px solid #e8e8e8
.lusirFormItem:last-child
  border-bottom none
.lusir-com_formLabel
  height 0.72rem
  font-size 0.36rem
  text-align left
  color #8e8e8e
  line-height 54px
  white-space nowrap
  max-width 30%
  display flex
  align-items center
.lusir-com_formContent
  display flex
  justify-content flex-end
  align-items center
  flex 1
  flex-wrap wrap
  line-height 0.72rem
.lusir-com_formInput
  font-size 0.36rem
  text-align right
  color #333333
  line-height 0.72rem
  flex 1
  padding-left 0.24rem
.lusir-com_placeholder
  color #cccccc
  font-size 0.36rem
  // line-height .72rem
  // display flex
  // align-items center
  // justify-content flex-end
  // color red
.lusir-com_button_iconBox
  padding 0
  background none
  border none
  margin 0
  line-height 0.72rem
.lusir-com_button_iconBox:after
  border none
.address-formItem-view
  display flex
  flex-direction row
  justify-content space-between
  flex-wrap wrap
  align-content flex-start
  padding 0.28rem 0.4rem
  background #ffffff
  .lusir-com_formLabel
    height 0.72rem
    font-size 0.36rem
    text-align left
    color #8e8e8e
    line-height 54px
    white-space nowrap
    max-width 30%
    display flex
    align-items center
  .lusir-com_formContent
    display flex
    justify-content flex-end
    align-items center
    flex 1
    flex-wrap wrap
    line-height 0.72rem
  .com_formContent_text
    height 0.72rem
    font-size 0.36rem
    text-align right
    color #333333
    line-height 0.72rem
  .address-textarea
    width 9.2rem !important
    font-size 0.36rem
    color #333333
    margin-top 0.28rem
    white-space normal
    word-break break-all
    height auto
    width auto
    min-height 0.72rem
</style>
